
<template>
  <div class="container">
    <div ref="chart" class="echart"/>
    <p class="overlay">{{stockName}} {{ stockCode }}</p>
  </div>
  <div style="width:160px;flex-direction: column;display: flex;">
      <div >
          <p class="demonstration">选择日期</p>
          <el-date-picker
              v-model="dayTime"
              type="date"
              placeholder="Pick a day"
              :size="large"
              style="width: 80%;"
              @change="handleDateChange"
          />
          <el-switch  style="margin-top:12px;" v-model="v_all"  @change="onSwitchAll()" inline-prompt active-text="全部" inactive-text="全部"/>
          <el-switch  style="margin-left:20px;margin-top:12px;" v-model="xx"  inline-prompt active-text="其它" inactive-text="其它"/>

          <el-switch style="margin-top:12px;" v-model="v_date" @change="on_switch_normal()"  inline-prompt active-text="日期" inactive-text="日期"/>
          <el-switch style="margin-left:20px;margin-top:12px;" v-model="v_week"   inline-prompt active-text="星期" inactive-text="星期"/>
          <el-switch  v-model="v_double_date"  inline-prompt active-text="对子" inactive-text="对子"/>
          <el-switch style="margin-left:20px;" v-model="v_increase"   inline-prompt active-text="涨幅" inactive-text="涨幅"/>
       
          <el-switch style="margin-top:22px;" v-model="v_amount" @change="on_switch_normal()"  inline-prompt active-text="成交量" inactive-text="成交量"/>
          <el-switch style="margin-left:20px;margin-top:22px;" v-model="v_change_amount"   inline-prompt active-text="缩放量" inactive-text="缩放量"/>
          <el-switch  v-model="v_rate"   inline-prompt active-text="换手率" inactive-text="换手率"/>
          <el-text  style="margin-left:20px;margin-top:22px;">占位</el-text>

          <el-switch style="margin-top:22px;--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66" v-model="v_join"  inline-prompt active-text="参与度" inactive-text="参与度" />
          <el-switch style="margin-left:20px;margin-top:22px;--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66" v-model="v_5join"   inline-prompt active-text="5日平均" inactive-text="5日平均" />
          <el-switch  v-model="v_z1"  inline-prompt active-text="纳指" inactive-text="纳指"/>
          <el-switch style="margin-left:30px;" v-model="v_z2"   inline-prompt active-text="金龙" inactive-text="金龙"/>
        

          <el-switch style="margin-top:22px;" v-model="v_limit_up"   inline-prompt active-text="涨停" inactive-text="涨停"/>
          <el-switch style="margin-left:20px;margin-top:22px;" v-model="v_limit_down"   inline-prompt active-text="跌停" inactive-text="跌停"/>
          <el-switch  v-model="v_history"   inline-prompt active-text="历史" inactive-text="历史"/>
          <el-text  style="margin-left:20px;margin-top:22px;margin-right:22px;">占位</el-text>


          <el-switch style="margin-top:22px;" v-model="v_amount_k" @change="on_switch_normal()"  inline-prompt active-text="量能线" inactive-text="量能线"/>
          <el-switch style="margin-left:20px;margin-top:22px;" v-model="v_rate_k"   inline-prompt active-text="换手线" inactive-text="换手线"/>
          <el-switch  v-model="v_amount_rate_k"   inline-prompt active-text="量换线" inactive-text="量换线"/>
          <el-text  style="margin-left:20px;margin-top:22px;">占位</el-text>

      </div>
      <a :href="getLink()" target="_blank" style="margin-top:20px;">涨停板</a>
      
  </div>
  
</template>  
<script>
import * as echarts from 'echarts';
import axios from 'axios';

export default {
  data() {
    return {
      v_all:false,

      v_date:true,
      v_week:false,
      v_double_date:false,
      v_increase:false,

      v_amount:false,
      v_change_amount:false,
      v_rate:false,

      v_join:false,
      v_5join:false,
      v_z1:false,
      v_z2:false,

      v_limit_up:false,
      v_limit_down:false,
      v_high:true,
      v_high_total:true,
      v_history:false,

      v_amount_k:false,
      v_rate_k:false,
      v_amount_rate_k:false,

      dayTime: new Date(),
      code:'883957',
      dayCount:0,
      upColor: '#FD1050',
      downColor: '#0CF49B',
      M0Color:'#FD1050',
      M5Color:'#000',
      M10Color:'yellow',
      M20Color:'#800080',
      M30Color:'green',
      M60Color:'blue',

      startPercent:70,
      endPercent:100,

      turnover:[],
      close:[],
      volData:[],
      rateData:[],
      volRateData:[],
      closePrice:[],
      highPrice:[],
      lowPrice:[],
      recordDate:[],
      kLineData:[ // open, close, high, low
        [150, 250, 350, 400],
        [370, 270, 570, 500],
        // ... 更多K线数据
      ],
      yAxisMin: 0,
      yAxisMax: 10,
    }
  },
  props: {
        num: 0,
  },
  watch: {
      num(val,oldValue) {
        this.dayCount = val
        this.fetchData();
      }
      // stockCode(newValue, oldValue) {
      //   console.log('stockCode', newValue, oldValue);
      // }
  },
  computed: {
    stockCode() {
      const value = 883957
      console.log('stockCode', value);
      this.code = value;
      this.fetchData();
      return value;
    },
    stockName() {
      const value = '全A等全';
      return value;
    }
  },
  mounted() {
    // this.initChart();
    this.dayTime = this.getToday();
    this.fetchData();
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.chart);
      // 指定图表的配置项和数据
      const option = {
        xAxis: [
          {
            data: this.recordDate,
            axisLabel: {// x轴标签相关设置
              formatter: function (value, index) {
                  return value.slice(0,  10);
              }
            }
          },
          {
            data: this.recordDate,
            axisLabel: {// x轴标签相关设置
              formatter: function (value, index) {
                  return value.slice(0,  10);
              }
            },
            gridIndex: 1,
          },
        ],

        yAxis: [{  
            type: 'value',  
            min: this.yAxisMin,
            max: this.yAxisMax,
            // 其他配置...  
            axisLine: {  
                // 这里设置Y轴主线的样式，但它通常不是我们要关注的  
                lineStyle: {  
                    color: '#000'  
                }  
            },  
            splitLine: {  
                // 将Y轴的分割线设置为虚线  
                show: true,  
                lineStyle: {  
                    type: 'dashed', // 设置为虚线  
                    color: '#ccc' // 分割线颜色  
                }  
            }  
        },{
          name: '成交量(亿)',  
          gridIndex: 1,
          axisLabel: {// x轴标签相关设置
            formatter: function (value, index) {
                return index == 0 ? "(亿)" : value;
            }
          }
        }],  

        grid: [
          {
            top:"1%",
            bottom: "40%",
          },
          {
            top: "73%",
          },
        ],  

        series: [{
          name: 'kLine',
          data: this.kLineData,
          type: 'candlestick',// 显示种类,如线性等       
          itemStyle: {// 对象样式
              normal: {
                  color: this.upColor,
                  color0: this.downColor,
                  borderColor: this.upColor,
                  borderColor0: this.downColor
              }
          },
          
        },{
            name:"volunm",
            type: "bar",
            data: this.turnover,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {   
              color: (params) => {
                return this.close[params.dataIndex] > 0 ? this.upColor : this.downColor; 
              }
            }  
          },
          {
            name: 'MA0',
            type: 'line',
            data: this.calculateMA(1,this.highPrice),
            smooth: true,
            symbol: "none", //隐藏选中时有小圆点
            lineStyle: {
              normal: {
                opacity: 0.8,
                color: '#00000000',
                width: 1
              }
            },
            label: {
              normal: {
                  show: true, // 显示标签
                  color: '#00000000',
                  position: 'top', // 标签位置：顶部
                  formatter: function (param) {
                      // 自定义标签内容
                      return `值: ${param.value}`;
                  }
              }
            }
          },

          {
            name: 'MA5',
            type: 'line',
            data: this.calculateMA(5,this.closePrice),
            smooth: true,
            symbol: "none", //隐藏选中时有小圆点
            lineStyle: {
              normal: {
                opacity: 0.8,
                color: this.M5Color,
                width: 1
              }
            },
          },
          {
            name: 'MA10',
            type: 'line',
            data: this.calculateMA(10,this.closePrice),
            smooth: true,
            symbol: "none", //隐藏选中时有小圆点
            lineStyle: {
              normal: {
                opacity: 0.8,
                color: this.M10Color,
                width: 1
              }
            },
          },
          {
            name: 'MA20',
            type: 'line',
            data: this.calculateMA(20,this.closePrice),
            smooth: true,
            symbol: "none", //隐藏选中时有小圆点
            lineStyle: {
              normal: {
                opacity: 0.8,
                color: this.M20Color,
                width: 1
              }
            },
          },
          {
            name: 'MA30',
            type: 'line',
            data: this.calculateMA(30,this.closePrice),
            smooth: true,
            symbol: "none", //隐藏选中时有小圆点
            lineStyle: {
              normal: {
                opacity: 0.8,
                color: this.M30Color,
                width: 1
              }
            },
          },
          {
            name: 'MA60',
            type: 'line',
            data: this.calculateMA(60,this.closePrice),
            smooth: true,
            symbol: "none", //隐藏选中时有小圆点
            lineStyle: {
              normal: {
                opacity: 0.8,
                color: this.M60Color,
                width: 1
              }
            },
          },
          
          {
            name: '量能指标',
            type: 'line',
            data: this.v_amount_k ? this.volData : [],
            smooth: false,
            symbol: "none", //隐藏选中时有小圆点
            lineStyle: {
              normal: {
                opacity: 0.8,
                color: this.M60Color,
                width: 3
              }
            },
          },
          {
            name: '换手率指标',
            type: 'line',
            data: this.v_rate_k ? this.rateData : [],
            smooth: false,
            symbol: "none", //隐藏选中时有小圆点
            lineStyle: {
              normal: {
                opacity: 0.8,
                color: this.M30Color,
                width: 3
              }
            },
          },
          {
            name: '换手率成交量差值指标',
            type: 'line',
            data: this.v_amount_rate_k ? this.volRateData : [],
            smooth: false,
            symbol: "none", //隐藏选中时有小圆点
            lineStyle: {
              normal: {
                opacity: 0.8,
                color: this.M10Color,
                width: 3
              }
            },
          },
        ],

        dataZoom: [  
          {  
              type: 'slider', // 设置为slider类型  
              show: true, // 是否显示滑动条  
              xAxisIndex: [0,1], // 指定作用于哪个坐标轴，K线图通常只有一个x轴  
              start: this.startPercent, // 初始时数据窗口的起始百分比  
              end: this.endPercent, // 初始时数据窗口的结束百分比，这里只显示10%的数据  
              // 其他可选配置...  
          },  
          {  
              type: 'inside', // 另一种dataZoom，允许通过鼠标滚轮缩放  
              xAxisIndex: [0,1],  
              zoomOnMouseWheel: true, // 是否启用鼠标滚轮缩放  
          }  
        ],

        tooltip: {  
            trigger: 'axis', // 触发类型，默认数据项触发，可选为：'item' | 'axis'  
            formatter: (params, ticket, callback) => {
              const item = params[0];
              var html = ""
              if (item.seriesName === "kLine") {
                // console.log('params:', params[0]);
                var turnover = this.turnover[item.dataIndex];
                var changeTurnover = this.changeTurnover[item.dataIndex];
                var turnoverRate = this.turnoverRate[item.dataIndex];
                var change = this.close[item.dataIndex];
                var limitUp = this.limitUp[item.dataIndex];
                var limitDown = this.limitDown[item.dataIndex];
                var high = this.high[item.dataIndex];
                var highTotal = this.highTotal[item.dataIndex];
                var intA = this.intA[item.dataIndex] == 1 ? '是' : '否';
                var marketJoin = this.marketJoin[item.dataIndex];
                var nMarketJoin = this.nMarketJoin[item.dataIndex];
                var z1 = this.z1[item.dataIndex];
                var z2 = this.z2[item.dataIndex];
                var accountUpDownMoney = this.accountUpDownMoney[item.dataIndex];
                var weekday = this.getWeekday(this.recordDate[item.dataIndex].slice(0, 10));
                var doubleDay = this.getDoubleDay(this.recordDate[item.dataIndex].slice(5, 10));
                console.log('change:', this.close[item.dataIndex]);

                var upDownTurnover = changeTurnover > 0 ? '+' : '';
                var upDown = change > 0 ? '+' : '';
                var upDownTurnoverColor = changeTurnover > 0 ? 'style="color:#ff4242"' : 'style="color:#26bf66"';
                var color = change > 0 ? 'style="color:#ff4242"' : 'style="color:#26bf66"';
                var normalColor = "";
                var limitUpColor = 'style="color:#ff4242"';
                var limitDownColor = 'style="color:#26bf66"';
                var highColor = 'style="color:#ff4242"';
                var highTotalColor = 'style="color:#ff4242"';
                if (high >= 7) {
                  highColor = 'style="color:#ff4242"';
                } else {
                  if (high <= 4) {
                    highColor = 'style="color:#26bf66"';
                  } else {
                    highColor = normalColor;
                  }
                }

                if (highTotal >= 9) {
                  highTotalColor = 'style="color:#ff4242"';
                } else {
                  if (highTotal <= 6) {
                    highTotalColor = 'style="color:#26bf66"';
                  } else {
                    highTotalColor = normalColor;
                  }
                }
              

                var intAColor = this.intA[item.dataIndex] == 1 ? 'style="color:#ff4242"' : 'style="color:#26bf66"';
                var nMarketJoinClor =  nMarketJoin > 23.50 ? 'style="color:#ff4242"' : normalColor;  
                var marketJoinClor = marketJoin > 23.5 ? 'style="color:#ff4242"' : normalColor;
                var z1Color = z1 > 0 ? 'style="color:#ff4242"' : 'style="color:#26bf66"';
                var z2Color = z2 > 0 ? 'style="color:#ff4242"' : 'style="color:#26bf66"';
                var accountUpDownMoneyColor =  accountUpDownMoney > 0 ? 'style="color:#ff4242"' : 'style="color:#26bf66"';
                var doubleDayColor = this.isDoubleDay(this.recordDate[item.dataIndex].slice(5, 10)) ? 'style="color:#ff4242;"' : normalColor;  
     
                html = '<div class="commColor" style="width:100px;margin-right: 25px;">';
                html += !this.v_date ? "" : '<div>日期  <span  '+normalColor+' >' + this.recordDate[item.dataIndex].slice(0, 10) + '</span></div>';
                html += !this.v_week ? "" : '<div>星期  <span  '+normalColor+' >' + weekday +  '</span></div>';
                html += !this.v_double_date ? "" : '<div>对子日期  <span  '+doubleDayColor+' >'  + doubleDay + '</span></div>';
                html += !this.v_increase ? "" :  '<div>涨跌  <span  '+color+' >' + upDown + change.toFixed(2) + '%</span></div></div>';
                html += !this.v_amount ? "" :  '<div>成交量  <span  '+normalColor+' >' + (turnover/10000).toFixed(0)  + '亿</span></div></div>';
                html += !this.v_change_amount ? "" :  '<div>增减量  <span  '+upDownTurnoverColor+' >' + upDownTurnover +  (changeTurnover/10000).toFixed(0)+ '亿</span></div></div>';
                html += !this.v_rate ? "" :  '<div>换手率  <span  '+normalColor+' >' + turnoverRate+ '%</span></div>';
                html += !this.v_join ? "" :  '<div>参与度  <span  '+marketJoinClor+' >' + marketJoin + '%</span></div>';
                html += !this.v_5join ? "" :  '<div>5日平均  <span  '+nMarketJoinClor+' >' + nMarketJoin + '%</span></div>';
                html += !this.v_z1 ? "" :  '<div>纳指  <span  '+z1Color+' >' + z1 + '%</span></div>';
                html += !this.v_z2 ? "" :  '<div>金龙  <span  '+z2Color+' >' + z2 + '%</span></div>';
                // html += !this.v_increase ? "" :  '<div>盈亏效应  <span  '+accountUpDownMoneyColor+' >' + accountUpDownMoney + '亿</span></div>';
                html += !this.v_limit_up ? "" :  '<div>涨停  <span  ' + limitUpColor + ' >' + limitUp + '</span></div>';
                html += !this.v_limit_down ? "" :  '<div>跌停  <span  ' + limitDownColor + ' >' + limitDown + '</span></div>';
                html += !this.v_high ? "" :  '<div>高度  <span  ' + highColor + ' >' + high + '</span></div>';
                html += !this.v_high_total ? "" :  '<div>总高度  <span  ' + highTotalColor + ' >' + highTotal + '</span></div>';
                html += !this.v_history ? "" :  '<div>历史短线  <span  ' + intAColor + ' >' + intA + '</span></div>';

                return html;
            //           var color ='style="color:#ff4242"';
              } else {
                var turnover =this.turnover[item.dataIndex];
                var changeTurnover = this.changeTurnover[item.dataIndex];
                var change = this.close[item.dataIndex];
                var color = change > 0 ? 'style="color:#ff4242"' : 'style="color:#26bf66"';
                html = '<div class="commColor" style="width:100px;margin-right: 20px;">';
                html += '<div>日期  <span  '+normalColor+' >' + this.recordDate[item.dataIndex].slice(0, 10) + '</span></div>';             
                html += '<div>成交量  <span  '+color+' >' + turnover + '万</span></div></div>';
                return html;
              }
              return html;
            },
            axisPointer: {  
                type: 'cross', // 默认为直线，可选为：'line' | 'shadow'  
            }  
        }, 
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

      var isChange = false;
      // 定义一个定时任务来定期更新数据
      let intervalId = setInterval(() => {
          if (isChange) {
            isChange = false;
            this.calculateHighLow();
            console.log('Updating data every 1 second...' + this.startPercent + '  ' + this.endPercent);
          }    
      }, 2000); // 每隔 1 秒执行一次
      myChart.on('datazoom', (params) => { 
        isChange = true; 
        if (params.start == null) {
          this.startPercent = params.batch[0].start;
          this.endPercent = params.batch[0].end;
          console.log('位置更新1...' + this.startPercent + '  ' + this.endPercent);
        } else {
          this.startPercent = params.start
          this.endPercent = params.end
          console.log('位置更新2...' + this.startPercent + '  ' + this.endPercent);
        }
      });
    },

    getToday()  {
      const today = new Date();
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1
      const day = String(today.getDate()).padStart(2, '0');

      return `${year}-${month}-${day}`;
    },

    getWeekday(dateStr) {
      const date = new Date(dateStr); // 将字符串转换为日期对象
      const daysOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      return daysOfWeek[date.getDay()]; // 返回对应的星期几
    },

    getDoubleDay(dateStr) {
      var str = dateStr.split('-');
      var one = Number(str[0]);
      var two = Number(str[1]);
      return one + ('·') + two;
    },

    isDoubleDay(dateStr) {
      var str = dateStr.split('-');
      return str[0] == str[1];
    },

    onSwitchAll() {

      this.v_date = this.v_all,
      this.v_week = this.v_all,
      this.v_double_date = this.v_all,
      this.v_increase = this.v_all,

      this.v_amount = this.v_all,
      this.v_change_amount = this.v_all,
      this.v_rate = this.v_all,

      this.v_join = this.v_all,
      this.v_5join = this.v_all,

      this.v_limit_up = this.v_all,
      this.v_limit_down = this.v_all,

      this.v_amount_k = this.v_all,
      this.v_rate_k = this.v_all,
      this.v_amount_rate_k = this.v_all
    },

    getLink() {
      // 动态生成链接
      return "https://www.iwencai.com/unifiedwap/result?w=" + this.dayTime + "A%E8%82%A1%E6%89%80%E6%9C%89%E6%B6%A8%E5%81%9C%E7%9A%84%E8%82%A1%E7%A5%A8%E5%8F%8A%E6%88%90%E4%BA%A4%E9%87%91%E9%A2%9D%EF%BC%8C%E6%8E%92%E9%99%A4st&querytype=stock";
    },

    getToday() {
      const today = new Date();
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1
      const day = String(today.getDate()).padStart(2, '0');

      return `${year}-${month}-${day}`;
    },

    handleDateChange(val) {
            console.log('选择了新的日期/时间:', val);
            const date = new Date(val)
            const year = date.getFullYear();
            const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以需要加1
            const day = ('0' + date.getDate()).slice(-2);
            this.dayTime = `${year}-${month}-${day}`;
            console.log('选择了新的日期/时间:', this.dayTime);
            fetchData();
    },

    async fetchData() {  
      try { 

        const response = await axios.get('api/plat/stock/getStockTimeData?stockCode=' + this.code + '&dayCount=' + this.dayCount + '&allCount=200'
          +   "&dayTime=" + this.dayTime
        );  
        
        const result = response.data;
        console.log('请求结果:', result);
        if (result.status == 200) {  
          console.log('请求成功:', result);
          this.kLineData = []; 
          this.turnover = [];
          this.changeTurnover = [];
          this.turnoverRate = [];   
          this.close = [];
          this.recordDate = [];
          this.volData = [];
          this.rateData = [];
          this.volRateData = [];
          this.closePrice = [];
          this.highPrice = [];
          this.lowPrice = [];

          // 指标
          this.upNumber = [];
          this.downNumber = [];
          this.high = [];
          this.highTotal = [];
          this.upVol = [];
          this.downVol = [];
          this.tiggerMaxBuy = [];
          this.tiggerMaxSail = [];
          this.tiggerMaxIn = [];
          this.tiggerMaxOut = [];
          this.limitUp = [];
          this.limitDown = [];
          this.intA = [];
          this.marketJoin = [];
          this.nMarketJoin = [];
          this.z1 = [];
          this.z2 = [];
          this.accountUpDownMoney = [];


          result.data = result.data.reverse()
          result.data.forEach(item => {   
            // 对item进行所需的操作 
            this.volData.push(item.volData) 
            this.rateData.push(item.rateData) 
            this.volRateData.push(item.volRateData) 
            this.closePrice.push(item.closePrice) 
            this.highPrice.push(item.maxPrice) 
            this.lowPrice.push(item.minPrice) 

            this.upNumber.push(item.upNumber) 
            this.downNumber.push(item.downNumber) 
            this.high.push(item.high) 
            this.highTotal.push(item.highTotal) 
            this.upVol.push(item.upVol) 
            this.downVol.push(item.downVol) 
            this.tiggerMaxBuy.push(item.tiggerMaxBuy) 
            this.tiggerMaxSail.push(item.tiggerMaxSail) 
            this.tiggerMaxIn.push(item.tiggerMaxIn) 
            this.tiggerMaxOut.push(item.tiggerMaxOut) 
            this.limitUp.push(item.limitUp) 
            this.limitDown.push(item.limitDown) 
            this.intA.push(item.intA) 
            this.marketJoin.push(item.marketJoin)
            this.nMarketJoin.push(item.nMarketJoin)
            this.z1.push(item.z1)
            this.z2.push(item.z2)
            this.accountUpDownMoney.push(item.accountUpDownMoney)
            const arr = [item.openPrice, item.closePrice, item.maxPrice, item.minPrice]
            this.kLineData.push(arr) 
            this.recordDate.push(item.recordDate)
            this.turnover.push(Number(item.turnover / 10000).toFixed(2))
            this.changeTurnover.push(Number(item.changeTurnover / 10000).toFixed(2))
            this.turnoverRate.push(item.turnoverRate.toFixed(2))
            this.close.push(item.close)
          }); 

          console.log("高度：", this.high)
          this.calculateHighLow();
          
           
        } else {
          console.error('请求失败:');
        }     
      } catch (error) {  
        console.error('请求error:', error);  
      }  
    },

    calculateHighLow() {

      // 计算最大值和最小值
      var startIndex = Math.round(this.highPrice.length * (this.startPercent / 100));
      var endIndex = Math.round(this.highPrice.length * (this.endPercent / 100)); 
      var highs = this.highPrice.slice(startIndex,endIndex);
      var lows = this.lowPrice.slice(startIndex,endIndex);
      const maxPrice = Math.max(...highs); // 找到最高价中的最大值
      const minPrice = Math.min(...lows); // 找到最低价中的最小
      // 自定义 y 轴的范围
      this.yAxisMin = (minPrice - (maxPrice - minPrice) * 0.1).toFixed(2)
      this.yAxisMax = (maxPrice + (maxPrice - minPrice) * 0.1).toFixed(2)

      this.initChart();
      // console.log("开始：" + startIndex,"结束：" + endIndex); 

    },
    //================================MA计算公式
    calculateMA(dayCount,data) {
      var result = [];
      for (var i = 0; i < data.length; i++) {
        if (i < dayCount) {
          result.push('-');
          continue;
        }
        var sum = 0;
        for (var j = 0; j < dayCount; j++) {
          sum += data[i - j];
        }
        result.push((sum / dayCount).toFixed(2));
      }
      console.log(result)
      return result;
    },
  
    //================================标注数据
    getMarketData(dayCount,data) {
        var result = [];
        for (var i = 0; i < data.length; i++) {
          if (i < dayCount) {
            result.push('-');
            continue;
          }
          var sum = 0;
          for (var j = 0; j < dayCount; j++) {
            sum += data[i - j];
          }
          result.push((sum / dayCount).toFixed(2));
        }
        console.log(result)
        return result;
    },
  },
}
</script>
  
<style scoped>
.echart {
  float: left;
  width: 100%; height: 725px;
}
.container {
    flex: 77; /* 75% */
}
.overlay {
  position: absolute; /* 设置为绝对定位 */
  top: 0%;
  left: 35%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 17px;
  font-weight: bold;
  font-family: 'Hiragino Sans GB'/* Inter, 'Helvetica Neue', Helvetica, 'PingFang SC',
  'Hiragino Sans GB', 'Microsoft YaHei' */
}
</style>
  